import { defineComponent } from 'vue'
import './index.scss'
import { validatenull as isEmpty } from '@/util/validate'
import { NodeUtils } from '../../flow-c'

// 条件节点
const isCondition = node => node.type === 'condition'
const notEmptyArray = arr => Array.isArray(arr) && arr.length > 0
// 是否是分支
const hasBranch = node => !isEmpty(node.conditionNodes)
const stop = e => e.stopPropagation()

const NormalCard = ({ data, originData, eventEmit }) => {
  const cls = []
  const afterTrue = (isTrue, name) => (isTrue && cls.push(name), isTrue)
  const isStartNode = afterTrue(NodeUtils.isStartNode(data))
  const isApproverNode = afterTrue(NodeUtils.isApproverNode(data), 'approve')
  const isCopyNode = afterTrue(NodeUtils.isCopyNode(data), 'copy')

  return (
    <section onClick={() => eventEmit('edit', data)}>
      <div class="title">
        {isApproverNode && <span class="ifont-shenpiguanli title-left-icon"></span>}
        {isCopyNode && <span class="ifont-s-promotion title-left-icon"></span>}
        <span class="title-text">{data.properties.title}</span>
        {/*!isStartNode && (
        <input vModel_trim={data.properties.title} class="title-input" onClick={stop} />
      )*/}
        <span
          class="ifont-close title-right-icon"
          onClick={e => (e.stopPropagation(), eventEmit('deleteNode', data, originData))}
        ></span>
      </div>

      <div class="content">
        <div class="text">{data.content}</div>
        <div class="arrow">
          <i class="ifont-right"></i>
        </div>
      </div>
    </section>
  )
}

const nodes = {
  start: NormalCard,
  approver: NormalCard,
  copy: NormalCard,
  empty: _ => null,
  condition({ eventEmit, data, originData }) {
    return (
      <section onClick={() => eventEmit('edit', data)}>
        <div class="title">
          <span class="title-text">{data.properties.title}</span>
          {/*<input v-model={[data.properties.title, ['trim']]} class="title-input" onClick={stop}/>*/}
          <span class="priority-title">优先级{data.properties.priority + 1}</span>
          <span
            class="ifont-close title-right-icon"
            onClick={e => (e.stopPropagation(), eventEmit('deleteNode', data, originData))}
          ></span>
        </div>
        <div class="content">
          <div class="text">{data.content}</div>
          <div class="arrow">
            <i class="ifont-right"></i>
          </div>
        </div>
        <div
          class="sort-left"
          onClick={e => (e.stopPropagation(), eventEmit('increasePriority', data, originData))}
        >
          <i class="ifont-left"></i>
        </div>
        <div
          class="sort-right"
          onClick={e => (e.stopPropagation(), eventEmit('decreasePriority', data, originData))}
        >
          <i class="ifont-right"></i>
        </div>
      </section>
    )
  }
}

const NodeButton = ({ data, eventEmit, isBranch = false }) => {
  // 只有非条件节点和条件分支树下面的那个按钮 才能添加新分支树
  const couldAddBranch = !hasBranch(data) || isBranch
  const isEmpty = data.type === 'empty'
  if (isEmpty && !isBranch) {
    return null
  }
  return (
    <div class="add-node-btn-box">
      <div class="add-node-btn">
        <a-popover trigger="click" placement="right">
          {{
            content() {
              return (
                <div class="add-node-popover-body">
                  <div
                    class="add-node-popover-item approver"
                    onClick={() => eventEmit('addApprovalNode', data, isBranch)}
                  >
                    <div class="item-wrapper">
                      <i class="ifont-shenpiguanli"></i>
                    </div>
                    <span>审批人</span>
                  </div>
                  <div
                    class="add-node-popover-item copy"
                    onClick={() => eventEmit('addCopyNode', data, isBranch)}
                  >
                    <div class="item-wrapper">
                      <i class="ifont-s-promotion"></i>
                    </div>
                    <span>抄送人</span>
                  </div>
                  <div
                    class="add-node-popover-item branch"
                    onClick={() => eventEmit('appendBranch', data, isBranch)}
                  >
                    <div class="item-wrapper">
                      <i class="ifont-liucheng"></i>
                    </div>
                    <span>条件分支</span>
                  </div>
                </div>
              )
            },
            default() {
              return (
                <button class="btn">
                  <i class="ifont-plus"></i>
                </button>
              )
            }
          }}
        </a-popover>
      </div>
    </div>
  )
}

const NodeFactory = ({ data, originData, eventEmit, verifyMode }) => {
  if (!data) {
    return
  }
  const showErrorTip = verifyMode && NodeUtils.checkNode(data) === false
  const res = []
  let branchNode = ''
  const Cmp = nodes[data.type]
  const selfNode = data.type !== 'empty' && (
    <div class="node-wrap">
      <div class={['node-wrap-box', data.type, showErrorTip ? 'error' : '']}>
        <div class="error-tip" onClick={e => (e.stopPropagation(), eventEmit('edit', data))}>
          <a-tooltip title="未设置条件" placement="top">
            <i class="ifont-warning-circle"></i>
          </a-tooltip>
        </div>

        <Cmp data={data} originData={originData} verifyMod={verifyMode} eventEmit={eventEmit} />
      </div>
      <NodeButton data={data} eventEmit={eventEmit} />
    </div>
  )

  // 如果节点是数组 一定为条件分支 添加分支样式包裹
  if (hasBranch(data)) {
    branchNode = (
      <div class="branch-wrap">
        <div class="branch-box-wrap">
          <div class="branch-box">
            <button class="add-branch" onClick={() => eventEmit('appendConditionNode', data)}>
              添加条件
            </button>
            {data.conditionNodes.map(v => (
              <NodeFactory
                data={v}
                originData={originData}
                verifyMod={verifyMode}
                eventEmit={eventEmit}
              />
            ))}
          </div>
        </div>
        <NodeButton data={data} eventEmit={eventEmit} isBranch />
      </div>
    )
  }

  // 条件节点
  if (isCondition(data)) {
    return (
      <div class="col-box">
        <div class="center-line"></div>
        {selfNode}
        {branchNode}
        <NodeFactory
          data={data.childNode}
          originData={originData}
          eventEmit={eventEmit}
          verifyMode={verifyMode}
        />
      </div>
    )
  }

  res.push(selfNode)
  branchNode && res.push(branchNode)
  data.childNode &&
    res.push(
      <NodeFactory
        data={data.childNode}
        originData={originData}
        eventEmit={eventEmit}
        verifyMode={verifyMode}
      />
    )

  return res
}

function EndNode() {
  return <div class="end-node">流程结束</div>
}

export default defineComponent({
  name: 'FlowCard',
  props: {
    data: { type: Object, required: true },
    // 点击发布时需要校验节点数据完整性 此时打开校验模式
    verifyMode: { type: Boolean, default: true }
  },
  emits: ['emits'],
  setup(props, { emit }) {
    function eventEmit(event, ...args) {
      // 去除默认绑定的事件对象
      // const params = { event, args: args.slice(0, -1) }
      const params = { event, args }
      emit('emits', params)
    }

    return () => {
      const { data, verifyMode } = props
      return (
        <div class="flow-card">
          <NodeFactory
            data={data}
            originData={data}
            eventEmit={eventEmit}
            verifyMode={verifyMode}
          />
          <EndNode />
        </div>
      )
    }

    // eslint-disable-next-line no-unreachable
    const aa = () => {
      return (
        <div class="flow-card">
          <div class="node-wrap">
            <div class="node-wrap-box start">
              <div class="title">
                <span class="ifont-s-promotion title-left-icon"></span>
                <span class="title-text">发起人</span>
                <span class="ifont-close title-right-icon"></span>
              </div>
              <div class="content">
                <div class="text">所有人</div>
              </div>
            </div>
            <div class="add-node-btn-box">
              <div class="add-node-btn">
                <button class="btn">
                  <i class="ifont-plus"></i>
                </button>
              </div>
            </div>
          </div>

          <div class="node-wrap">
            <div class="node-wrap-box approver">
              <div class="title">
                <span class="ifont-shenpi-lv title-left-icon"></span>
                <span class="title-text">审批人</span>
                <span class="ifont-close title-right-icon"></span>
              </div>
              <div class="content">
                <div class="text">请设置审批人</div>
                <div class="arrow">
                  <i class="ifont-right"></i>
                </div>
              </div>
            </div>
            <div class="add-node-btn-box">
              <div class="add-node-btn">
                <button class="btn">
                  <i class="ifont-plus"></i>
                </button>
              </div>
            </div>
          </div>

          <div class="node-wrap">
            <div class="node-wrap-box copy">
              <div class="title">
                <span class="ifont-s-promotion title-left-icon"></span>
                <span class="title-text">抄送人</span>
                <span class="ifont-close title-right-icon"></span>
              </div>
              <div class="content">
                <div class="text">请设置抄送人</div>
                <div class="arrow">
                  <i class="ifont-right"></i>
                </div>
              </div>
            </div>
            <div class="add-node-btn-box">
              <div class="add-node-btn">
                <button class="btn">
                  <i class="ifont-plus"></i>
                </button>
              </div>
            </div>
          </div>

          <div class="branch-wrap">
            <div class="branch-box-wrap">
              <div class="branch-box">
                <button class="add-branch">添加条件</button>
                <div class="col-box">
                  <div class="center-line"></div>
                  <div class="node-wrap">
                    <div class="node-wrap-box condition">
                      <div class="title">
                        <span class="title-text">条件1</span>
                        <span class="priority-title">优先级1</span>
                        <span class="ifont-close title-right-icon"></span>
                      </div>
                      <div class="content">
                        <div class="text">请设置审批人</div>
                        <div class="arrow">
                          <i class="ifont-right"></i>
                        </div>
                      </div>
                      <div class="sort-left">
                        <i class="ifont-left"></i>
                      </div>
                      <div class="sort-right">
                        <i class="ifont-right"></i>
                      </div>
                    </div>
                    <div class="add-node-btn-box">
                      <div class="add-node-btn">
                        <button class="btn">
                          <i class="ifont-plus"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                  <div class="node-wrap">
                    <div class="node-wrap-box approver">
                      <div class="title">
                        <span class="ifont-shenpi-lv title-left-icon"></span>
                        <span class="title-text">审批人</span>
                        <span class="ifont-close title-right-icon"></span>
                      </div>
                      <div class="content">
                        <div class="text">请设置审批人</div>
                        <div class="arrow">
                          <i class="ifont-right"></i>
                        </div>
                      </div>
                    </div>
                    <div class="add-node-btn-box">
                      <div class="add-node-btn">
                        <button class="btn">
                          <i class="ifont-plus"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-box">
                  <div class="center-line"></div>
                  <div class="node-wrap">
                    <div class="node-wrap-box condition">
                      <div class="title">
                        <span class="title-text">条件2</span>
                        <span class="priority-title">优先级2</span>
                        <span class="ifont-close title-right-icon"></span>
                      </div>
                      <div class="content">
                        <div class="text">请设置审批人</div>
                        <div class="arrow">
                          <i class="ifont-right"></i>
                        </div>
                      </div>
                      <div class="sort-left">
                        <i class="ifont-left"></i>
                      </div>
                      <div class="sort-right">
                        <i class="ifont-right"></i>
                      </div>
                    </div>
                    <div class="add-node-btn-box">
                      <div class="add-node-btn">
                        <button class="btn">
                          <i class="ifont-plus"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="add-node-btn-box">
              <div class="add-node-btn">
                <button class="btn">
                  <i class="ifont-plus"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      )
    }
  }
})
